<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
  <link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">
  <title>扭蛋canvas</title>

  <style>
    .shake_canvas {
      animation: shakeXY ;
      animation-duration: .8s;
      animation-iteration-count: infinite;
    }

    @keyframes shakeXY {
      0%, 100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
      }

      10%, 30%, 50%, 70%, 90% {
          -webkit-transform: translate3d(-3px,-3px,0);
          transform: translate3d(-3px,-3px,0);
      }
      20%, 40%, 60%, 80% {
          -webkit-transform: translate3d(3px,3px,0);
          transform: translate3d(3px,3px,0);
      }
    }

    .img_rotate {
      animation-name: rotateImg;
      animation-duration: .8s;
      animation-iteration-count: infinite;
    }

    @keyframes rotateImg {
      from {
        transform: rotate(0);
      }

      to {
        transform: rotate(360deg);
      }
    }

  </style>
</head>
<body>
  <b>小球重力 </b>
 
  <div>
    1. 小球上升后 不会一直上升 到一个数值下降
    2. 下降到最低高度后 会继续上升
  </div>

  <!-- <div class="shake shake-constant">yellres is awesome!!!</div> -->
  
  <canvas id="gacha" width="600" height="400"  style="background: cyan;"></canvas>
  <img src="../../img/2.png" alt="" id="img01" style="display: none;" class="img_rotate"/>
  <img src="../../img/2.png" alt="" id="img02" style="display: none;" class="img_rotate"/>

  <button id="startBtn">start gacha</button>
  <button id="stopBtn">stop gacha</button>


  <script>
    const x = 600
    const y = 400
    let timer = null
    const ctx = document.querySelector('#gacha').getContext('2d')
    const img01 = document.querySelector('#img01')
    const img02 = document.querySelector('#img02')
    const stopBtn = document.querySelector('#stopBtn')
    const startBtn = document.querySelector('#startBtn')
    let performanceNow = null
    let interval = null
    let ballArr = []
    let rafReference
    
    function randomWidth(x) {
      return Math.floor(Math.random() * x) 
    }

    function Ball(img) {
      this.r =  50 
      // 随机高度
      // this.ejectHeight = randomWidth(y)
      // canvas 绘制 坐标整数会比较好
      this.x =  randomWidth(x - 100) 
      this.y = 0

      // 定义球的速度
      this.speedX = 20
      // 向下方向为正
      // 向上为负
      this.speedY = 0
      this.speedYDown = 20
      this.speedYUp = -20

      this.state = 'down'
      this.img = img
    }

    // this.speedYUp = 0 小球不能上弹
    Ball.prototype.move = function() {
      this.y += this.speedY
     }

    Ball.prototype.rule = function () {
      // 1.speedYUp 逐渐减少
      // 2. 控制时间
      // 2.1  下落 上升的时间一致
      // 3. 速度逐渐变化
      // 3.1 下落时 0 -> maxV 速度越来越快
      // 3.2 上升时 maxV -> 0 速度逐渐减少 最后到0
      if (this.state == 'down') {
        // 逐渐增加下降速度
        this.speedY += 5
      } else if (this.state == 'up') {
        // 让上升速度为0
        this.speedY += 5
        if (this.speedY >= 0) {
          console.log(this.speedY);
          this.speedY = 0  
          this.state = 'down'
        }
      }

      // console.log(this.speedY);

      if (this.y >= y - 100) {
        console.log(this.speedY);
        if (this.speedY > 10) {
          // 落地的减少速度 10???
          this.speedY -= 10
          this.speedY = -Math.abs(this.speedY)
          console.log(this.speedY, 'this.speedYthis.speedYthis.speedYthis.speedY');
          this.state = 'up'
        } else {
          // 停止自由落体
          this.y = y - 80
          ctx.clearRect(0, 0, 600, 400);
          ballArr.forEach(item => item && item.run())
          clearInterval(timer)
        }
        
      } 

      // ？？？ 上升的最大值 还能到顶部   
      // ？？？ 为什么小球能下降  

    }

    Ball.prototype.run = function() {
      ctx.drawImage(this.img, this.x, this.y, 80, 100)
    }

    function init() {
      // 创建小球 
      var ball = new Ball(img01)
      // var ball2 = new Ball(img02)
      // var ball3 = new Ball(img02)
      // var ball4 = new Ball(img02)
      // var ball5 = new Ball(img02)
      // var ball6 = new Ball(img02)
      // var ball7 = new Ball(img02)
      // var ball8 = new Ball(img02)
      // ballArr = [ball, ball2, ball3, ball4, ball5, ball6, ball7, ball8]
      ballArr = [ball]
      // 渲染所有小球初始位置
      ballArr.forEach(item => item && item.run())
    }

    // 把所有的球渲染出来
    function renderMovingBall(ballArr) {
      ballArr.forEach(item => item && item.rule())
      ballArr.forEach(item => item && item.move())
      ctx.clearRect(0, 0, 600, 400);
      ballArr.forEach(item => item && item.run())
    }

    // 开始扭蛋
    startBtn.addEventListener('click', function () {
      clearInterval(timer)
      performanceNow = performance.now()

      // 16ms 间隔绘制小球
      timer = setInterval(() => {
        renderMovingBall(ballArr)
      }, 16)
    })

    // 停止 requestAnimationFrame
    stopBtn.addEventListener('click', function () {
      // cancelAnimationFrame(rafReference)
      clearInterval(timer)
    })

    init()


  </script>
</body>
</html>